import {messages} from "share/common";
import React from 'react'
import {connect} from 'react-redux'
import { Select, message, Tabs } from "antd";
import baseService from "share/base.service";
import 'styles/financial-account/doc-template.scss';
import Condition from "components/condition";
import TemplateHeader from 'containers/financial-account/doc-template/template-header';
import TemplateRow from 'containers/financial-account/doc-template/template-row';
import TemplateValidate from 'containers/financial-account/doc-template/template-validate';
const Option = Select.Option;
const TabPane = Tabs.TabPane;
const If = Condition.If;

class docTemplate extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      setOfBooks: [],
      setOfBooksId: this.props.company.setOfBooksId,
      status: 'template-header',
      tabs: [
        {key: 'template-header', name: messages('financial-account.key10')/*凭证模板头样式*/},
        {key: 'template-row', name: messages('financial-account.key11')/*凭证模板行样式*/},
        {key: 'template-validate', name: messages('financial-account.key14')/*凭证校验规则定义*/}
      ],
    };
  }

  componentWillMount(){
    this.getSetOfBook();
  }

  //获取帐套
  getSetOfBook = () => {
    baseService.getSetOfBooksByTenant().then(res => {
      this.setState({setOfBooks:res.data})
    }).catch((e) => {
      message.error(e.response.data.message);
    })
  };

  handleChangeBookId = (value) => {
    this.setState({setOfBooksId: value});
  };

  onChangeTabs = (value) => {
    this.setState({status: value})
  };

  render(){
    const { setOfBooks, status, tabs, setOfBooksId } = this.state;
    return (
      <div className="doc-template">
        <div className='alternation-top'/>
        <div className="audit-opinion-title"> {messages('financial-account.key9')/*帐套：*/}
          <Select onChange={this.handleChangeBookId} defaultValue={`${this.props.company.setOfBooksName}`} disabled={!this.props.tenantMode}>
            {
              setOfBooks.map(item => {
                return <Option key={item.id} title={item.setOfBooksName}>{item.setOfBooksName}</Option>
              })
            }
          </Select>
        </div>
        <div className='alternation-middle'/>
        <div style={{marginTop:'20px'}}>
          <Tabs type="card" onChange={this.onChangeTabs} defaultActiveKey={status}>
            {
              tabs.map(item => {
                return <TabPane tab={item.name} key={item.key}/>;
              })
            }
          </Tabs>
          <If value={status === 'template-header'}>
            <TemplateHeader setOfBooksId={setOfBooksId}/>
          </If>
          <If value={status === 'template-row'}>
            <TemplateRow setOfBooksId={setOfBooksId}/>
          </If>
          <If value={status === 'template-validate'}>
            <TemplateValidate setOfBooksId={setOfBooksId}/>
          </If>
        </div>
      </div>
    )
  }
}

function mapStateToProps(state)  {
  return {
    company: state.login.company,
    tenantMode: state.main.tenantMode
  }
}

export default connect(mapStateToProps)(docTemplate);
